<style>
    .dib-box {
        width: 630px;
        margin:0 auto;
    }

    .dib-box .dib {
        vertical-align: top;
        font-size: 12px;
        letter-spacing: normal;
        word-spacing: normal;
        line-height: inherit;
        width: 50px;
        margin-bottom: 10px;
        margin-right: 10px;
        text-align: center;
        list-style: none !important;
        cursor: pointer;
        display: inline-block;
    }
    .dib-box .dib:nth-child(10n){
        margin-right: 0;
    }

    .dib-box .icon {
        display: block;
        height: 50px;
        line-height: 50px;
        font-size: 30px;
        /*margin: 10px auto;*/
        color: #333;
        -webkit-transition: font-size 0.25s linear, width 0.25s linear;
        -moz-transition: font-size 0.25s linear, width 0.25s linear;
        transition: font-size 0.25s linear, width 0.25s linear;
    }
    .dib-box .dib:hover .icon{
        font-size: 42px;
    }

    .dib-box .name, .dib-box .code-name {
        color: #666;
        display: none;
    }
</style>
<div class="sm-pop">
    <ul class="icon_lists dib-box" id="menu-icon-pop">

        <li class="dib">
            <span class="icon iconfont icon-zhanghu"></span>
            <div class="name">
                账户
            </div>
            <div class="code-name">.icon-zhanghu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-msnui-service"></span>
            <div class="name">
                服务
            </div>
            <div class="code-name">.icon-msnui-service
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-back"></span>
            <div class="name">
                back
            </div>
            <div class="code-name">.icon-back
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-category"></span>
            <div class="name">
                Category
            </div>
            <div class="code-name">.icon-category
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-comments"></span>
            <div class="name">
                comments
            </div>
            <div class="code-name">.icon-comments
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
                delete
            </div>
            <div class="code-name">.icon-delete
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
                edit
            </div>
            <div class="code-name">.icon-edit
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-favorite"></span>
            <div class="name">
                favorite
            </div>
            <div class="code-name">.icon-favorite
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-form"></span>
            <div class="name">
                form
            </div>
            <div class="code-name">.icon-form
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
                help
            </div>
            <div class="code-name">.icon-help
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-information"></span>
            <div class="name">
                information
            </div>
            <div class="code-name">.icon-information
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-less"></span>
            <div class="name">
                less
            </div>
            <div class="code-name">.icon-less
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-moreunfold"></span>
            <div class="name">
                more_unfold
            </div>
            <div class="code-name">.icon-moreunfold
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
                more
            </div>
            <div class="code-name">.icon-more
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-pic"></span>
            <div class="name">
                pic
            </div>
            <div class="code-name">.icon-pic
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-qrcode"></span>
            <div class="name">
                QRCode
            </div>
            <div class="code-name">.icon-qrcode
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
                refresh
            </div>
            <div class="code-name">.icon-refresh
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
                search
            </div>
            <div class="code-name">.icon-search
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-set"></span>
            <div class="name">
                set
            </div>
            <div class="code-name">.icon-set
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-success"></span>
            <div class="name">
                success
            </div>
            <div class="code-name">.icon-success
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-viewgallery"></span>
            <div class="name">
                ViewGallery
            </div>
            <div class="code-name">.icon-viewgallery
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-viewlist"></span>
            <div class="name">
                Viewlist
            </div>
            <div class="code-name">.icon-viewlist
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wrong"></span>
            <div class="name">
                wrong
            </div>
            <div class="code-name">.icon-wrong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
                add
            </div>
            <div class="code-name">.icon-add
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-github"></span>
            <div class="name">
                github
            </div>
            <div class="code-name">.icon-github
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-remind"></span>
            <div class="name">
                remind
            </div>
            <div class="code-name">.icon-remind
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-attachment"></span>
            <div class="name">
                attachment
            </div>
            <div class="code-name">.icon-attachment
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-discount"></span>
            <div class="name">
                discount
            </div>
            <div class="code-name">.icon-discount
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gifts"></span>
            <div class="name">
                gifts
            </div>
            <div class="code-name">.icon-gifts
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-lights"></span>
            <div class="name">
                lights
            </div>
            <div class="code-name">.icon-lights
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jewelry"></span>
            <div class="name">
                jewelry
            </div>
            <div class="code-name">.icon-jewelry
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-link"></span>
            <div class="name">
                link
            </div>
            <div class="code-name">.icon-link
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-text"></span>
            <div class="name">
                text
            </div>
            <div class="code-name">.icon-text
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-remind1"></span>
            <div class="name">
                remind
            </div>
            <div class="code-name">.icon-remind1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-icondownload"></span>
            <div class="name">
                download
            </div>
            <div class="code-name">.icon-icondownload
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fileaudio"></span>
            <div class="name">
                file-audio
            </div>
            <div class="code-name">.icon-fileaudio
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-bad"></span>
            <div class="name">
                bad
            </div>
            <div class="code-name">.icon-bad
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-good"></span>
            <div class="name">
                good
            </div>
            <div class="code-name">.icon-good
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-iconfontunie62c"></span>
            <div class="name">
                信封
            </div>
            <div class="code-name">.icon-iconfontunie62c
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-error-1"></span>
            <div class="name">
                错号
            </div>
            <div class="code-name">.icon-error-1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-right-1"></span>
            <div class="name">
                对号
            </div>
            <div class="code-name">.icon-right-1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
                微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-more1"></span>
            <div class="name">
                省略号
            </div>
            <div class="code-name">.icon-more1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-qq"></span>
            <div class="name">
                QQ
            </div>
            <div class="code-name">.icon-qq
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-zanting"></span>
            <div class="name">
                暂停
            </div>
            <div class="code-name">.icon-zanting
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-zidian"></span>
            <div class="name">
                字典
            </div>
            <div class="code-name">.icon-zidian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
                更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yinpinaudio47"></span>
            <div class="name">
                音频_audio47
            </div>
            <div class="code-name">.icon-yinpinaudio47
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
                删除 (1)
            </div>
            <div class="code-name">.icon-shanchu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-qq1"></span>
            <div class="name">
                qq
            </div>
            <div class="code-name">.icon-qq1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
                日历
            </div>
            <div class="code-name">.icon-rili
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yonghutouxiang"></span>
            <div class="name">
                用户 头像
            </div>
            <div class="code-name">.icon-yonghutouxiang
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-doc"></span>
            <div class="name">
                文章管理02
            </div>
            <div class="code-name">.icon-doc
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-souhu"></span>
            <div class="name">
                搜狐
            </div>
            <div class="code-name">.icon-souhu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-weixin1"></span>
            <div class="name">
                微信
            </div>
            <div class="code-name">.icon-weixin1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-lianxiwomen-copy"></span>
            <div class="name">
                联系我们
            </div>
            <div class="code-name">.icon-lianxiwomen-copy
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
                编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-mobancaidan"></span>
            <div class="name">
                模板菜单
            </div>
            <div class="code-name">.icon-mobancaidan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yingyongkuangjiachajian"></span>
            <div class="name">
                应用框架插件
            </div>
            <div class="code-name">.icon-yingyongkuangjiachajian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-hot"></span>
            <div class="name">
                hot
            </div>
            <div class="code-name">.icon-hot
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-icon_notice"></span>
            <div class="name">
                通知
            </div>
            <div class="code-name">.icon-icon_notice
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-ziyuanku"></span>
            <div class="name">
                资源库
            </div>
            <div class="code-name">.icon-ziyuanku
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yingxiaozhongxin"></span>
            <div class="name">
                营销中心
            </div>
            <div class="code-name">.icon-yingxiaozhongxin
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
                视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-qiyong"></span>
            <div class="name">
                启用
            </div>
            <div class="code-name">.icon-qiyong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
                密码
            </div>
            <div class="code-name">.icon-mima
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yunying"></span>
            <div class="name">
                运营
            </div>
            <div class="code-name">.icon-yunying
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-pinpai"></span>
            <div class="name">
                品牌
            </div>
            <div class="code-name">.icon-pinpai
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jiaoseguanli"></span>
            <div class="name">
                角色管理
            </div>
            <div class="code-name">.icon-jiaoseguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-send"></span>
            <div class="name">
                群发
            </div>
            <div class="code-name">.icon-send
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
                文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fuzhi"></span>
            <div class="name">
                复制
            </div>
            <div class="code-name">.icon-fuzhi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yingxiao"></span>
            <div class="name">
                营销
            </div>
            <div class="code-name">.icon-yingxiao
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-institute"></span>
            <div class="name">
                机构
            </div>
            <div class="code-name">.icon-institute
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wangzhan"></span>
            <div class="name">
                网站
            </div>
            <div class="code-name">.icon-wangzhan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-data-base"></span>
            <div class="name">
                数据库
            </div>
            <div class="code-name">.icon-data-base
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-ziyuanguanli"></span>
            <div class="name">
                资源管理
            </div>
            <div class="code-name">.icon-ziyuanguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-tongji"></span>
            <div class="name">
                统计
            </div>
            <div class="code-name">.icon-tongji
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
                首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
                返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shizhong"></span>
            <div class="name">
                时钟
            </div>
            <div class="code-name">.icon-shizhong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-sucai"></span>
            <div class="name">
                素材
            </div>
            <div class="code-name">.icon-sucai
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-daohang-gongzhonghaotixing"></span>
            <div class="name">
                导航-公众号设置
            </div>
            <div class="code-name">.icon-daohang-gongzhonghaotixing
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-guanggao"></span>
            <div class="name">
                广告
            </div>
            <div class="code-name">.icon-guanggao
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-renyuanguanli"></span>
            <div class="name">
                人员管理
            </div>
            <div class="code-name">.icon-renyuanguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fangda"></span>
            <div class="name">
                放大
            </div>
            <div class="code-name">.icon-fangda
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
                播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gaiicon-"></span>
            <div class="name">
                工作台
            </div>
            <div class="code-name">.icon-gaiicon-
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jiekou"></span>
            <div class="name">
                接口
            </div>
            <div class="code-name">.icon-jiekou
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-camera"></span>
            <div class="name">
                camera
            </div>
            <div class="code-name">.icon-camera
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-navicon-tp"></span>
            <div class="name">
                投票
            </div>
            <div class="code-name">.icon-navicon-tp
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wenjuantiaocha"></span>
            <div class="name">
                问卷调查
            </div>
            <div class="code-name">.icon-wenjuantiaocha
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wenzhang"></span>
            <div class="name">
                文章
            </div>
            <div class="code-name">.icon-wenzhang
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shujuku"></span>
            <div class="name">
                数据库
            </div>
            <div class="code-name">.icon-shujuku
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shengchengbaobiao"></span>
            <div class="name">
                生成报表
            </div>
            <div class="code-name">.icon-shengchengbaobiao
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jiankong"></span>
            <div class="name">
                监控
            </div>
            <div class="code-name">.icon-jiankong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fanhui1"></span>
            <div class="name">
                返回
            </div>
            <div class="code-name">.icon-fanhui1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-lunbo"></span>
            <div class="name">
                轮播
            </div>
            <div class="code-name">.icon-lunbo
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fanhui2"></span>
            <div class="name">
                返回
            </div>
            <div class="code-name">.icon-fanhui2
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-xinwen"></span>
            <div class="name">
                新闻
            </div>
            <div class="code-name">.icon-xinwen
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-api"></span>
            <div class="name">
                API接口
            </div>
            <div class="code-name">.icon-api
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jiankong1"></span>
            <div class="name">
                监控
            </div>
            <div class="code-name">.icon-jiankong1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-hulianwangyingxiao-"></span>
            <div class="name">
                互联网营销-2
            </div>
            <div class="code-name">.icon-hulianwangyingxiao-
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
                关 闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fanhui3"></span>
            <div class="name">
                返回
            </div>
            <div class="code-name">.icon-fanhui3
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-logo-windows"></span>
            <div class="name">
                logo-windows
            </div>
            <div class="code-name">.icon-logo-windows
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shouqi-"></span>
            <div class="name">
                收起
            </div>
            <div class="code-name">.icon-shouqi-
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-zhankai-"></span>
            <div class="name">
                展开
            </div>
            <div class="code-name">.icon-zhankai-
            </div>
        </li>

    </ul>
</div>